<template>
  <div class="container" @click.stop="showLanguageHandel">
    <div class="page_content container-tt">
      <header class="flex_between">
        <div class="headLogo">
          <nuxt-link to="/de">
            <div class="flex_">
              <img
                src="/static/logo.svg"
                class="img"
                alt="logo"
                width="34"
                height="34"
              />
              <span class="projectName">SavingTik</span>
            </div>
          </nuxt-link>
        </div>
        <div class="headTabs flex_">
          <!-- <div class="tItem tItemBlod bor">
            <nuxt-link to="/de"> TikTok Downloader </nuxt-link>
          </div> -->
          <nuxt-link to="/de/download-tiktok-mp3">
            <div @click="goToTop('mp3')" class="tItem">
              TikTok MP3 herunterladen
            </div>
          </nuxt-link>
          <nuxt-link to="/de/download-tiktok-story">
            <div @click="goToTop('story')" class="tItem">
              TikTok Story herunterladen
            </div>
          </nuxt-link>
          <language ref="languageRef"></language>
        </div>
        <div class="drawer" @click="showAppRightHandel">
          <img src="/static/menu.png" class="img" alt="menu" />
        </div>
      </header>
      <div class="banner_box">
        <div class="banner flex_ccenter">
          <h1 class="h1">TikTok Video Download</h1>
          <h2 class="h2">
            - Tiktok Downloader, ohne Wasserzeichen. Schnell. -
          </h2>
        </div>
      </div>
      <div class="downloadInput flex_center">
        <div class="inputBox flex_between">
          <input
            type="text"
            v-model="input"
            @keydown="sendDownload($event)"
            @input="handleInput"
            @paste="handleInput"
            class="ipt"
            placeholder="Fügen Sie hier den TikTok-Link ein"
            :disabled="isHttpLoading"
          />
          <divdownSuccess
            class="clearx flex_ccenter"
            v-if="input != ''"
            @click.stop="input = ''"
          >
            <img src="/static/clear.png" class="img" alt="" />
          </divdownSuccess>
          <div
            class="downBtn shou flex_ccenter"
            :class="isHttpLoading ? 'isHttpLoading' : ''"
            @click.stop="Download"
          >
            <div class="downImg">
              <img src="/static/download.webp" class="img" alt="download" />
            </div>
            <div class="iptbtn">Download</div>
          </div>
          <div class="posi shou" v-if="input != ''" @click.stop="input = ''">
            <img src="/static/clear.png" class="img" alt="" />
          </div>
        </div>
      </div>
      <div class="downStorySuccess" v-if="downStorySuccess">
        <div class="storyVideoInfo flex_between">
          <div class="downLeft flex_">
            <img :src="downData.avatar" class="img" alt="" />
            <div class="flex_column info">
              <div class="text1">
                {{ downData.title }}
              </div>
              <div class="text2">{{ downData.nickname }}</div>
            </div>
          </div>
          <div class="downBtn flex_ccenter shou" @click="allIn">
            Download All
          </div>
        </div>
        <div class="storyImageList flex_between">
          <div class="item" :key="k" v-for="(item, k) in downData.images">
            <client-only>
              <el-image
                style="width: 100%; height: 100%"
                fit="cover"
                :src="item"
                alt="Photo"
                :preview-src-list="downData.images"
              >
              </el-image>
            </client-only>
            <div class="overlay">
              <div
                class="posi shou flex_center"
                @click="handleDownload(item, 'SavingTik-Image', 'image')"
              >
                <img
                  src="/static/download.webp"
                  class="xiazai"
                  alt="download"
                />
                <div>Download Photo</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downSuccess flex_center" v-if="downSuccess">
        <div class="success_box">
          <div class="_video flex_between">
            <div class="bigImg flex_ccenter">
              <img :src="downData.cover" class="img" alt="" />
            </div>
            <div class="downInfo flex_column">
              <div class="info_1 flex_between">
                <div class="tit flex_">
                  <div class="timg">
                    <img
                      src="/static/blue.webp"
                      class="img"
                      alt="blue square"
                    />
                  </div>
                  <div>{{ downData.nickname }}</div>
                </div>
                <div class="times flex_">
                  <img src="/static/time.png" class="img" alt="" />
                  {{ duration }}
                </div>
              </div>
              <div class="info_2">
                {{ downData.title }}
              </div>
              <div class="info_3">
                <div class="item flex_between">
                  <div class="downLeft flex_column">
                    <div class="text1">Ohne Wasserzeichen</div>
                    <div class="text2">{{ WithoutVideoSize }}</div>
                  </div>
                  <div
                    class="downBtn flex_ccenter shou"
                    @click="
                      handleDownload(
                        downData.video_url,
                        'SavingTik-Without Watermark',
                        'video'
                      )
                    "
                  >
                    Download
                  </div>
                </div>
                <!-- <div class="item flex_between">
                  <div class="downLeft flex_column">
                    <div class="text1">Video Download</div>
                    <div class="text2">{{VideoSize }}</div>
                  </div>
                  <div class="downBtn flex_ccenter shou">Download</div>
                </div> -->
                <div class="item flex_between">
                  <div class="downLeft">
                    <div class="text1">Download MP3</div>
                  </div>
                  <div
                    class="downBtn flex_ccenter shou"
                    @click="
                      handleDownload(
                        downData.mp3_url,
                        'SavingTik-Download MP3',
                        'mp3'
                      )
                    "
                  >
                    Download
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downStorySuccess_app" v-if="downStorySuccess">
        <div class="storyVideoInfo flex_between">
          <div class="downLeft flex_">
            <img :src="downData.avatar" class="img" alt="" />
            <div class="flex_column info">
              <div class="text1">
                {{ downData.title }}
              </div>
              <div class="text2">{{ downData.nickname }}</div>
            </div>
          </div>
        </div>
        <div class="allDown flex_ccenter" @click="allIn">Download</div>
        <div class="storyImageList flex_between">
          <div
            class="item"
            @click.stop="previewImage(item, k)"
            :key="k"
            v-for="(item, k) in downData.images"
          >
            <img :src="item" class="img" alt="Photo" />
            <div class="overlay">
              <div
                class="posi shou flex_center"
                @click.stop="handleDownload(item, 'SavingTik-Image', 'image')"
              >
                <img src="/static/appxiazai.png" class="xiazai" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="downSuccess_app flex_center" v-if="downSuccess">
        <div class="success_box">
          <div class="_video flex_between">
            <div class="bigImg flex_ccenter">
              <img :src="downData.cover" class="img" alt="" />
            </div>
            <div class="downInfo flex_column">
              <div class="info_1">
                <div class="tit flex_">
                  <div class="timg">
                    <img src="/static/point.png" class="img" alt="" />
                  </div>
                  <div class="uname">{{ downData.title }}</div>
                </div>
              </div>
              <div class="info_2">{{ downData.nickname }}</div>
              <div class="times flex_between">
                <div></div>
                <div>Zeit — — {{ duration }}</div>
              </div>
            </div>
          </div>
          <div class="info_3">
            <div class="item flex_between">
              <div class="downLeft flex_column">
                <div class="text1">Ohne Wasserzeichen</div>
                <div class="text2">{{ WithoutVideoSize }}</div>
              </div>
              <div
                class="downBtn flex_ccenter shou"
                @click="
                  handleDownload(
                    downData.video_url,
                    'SavingTik-Without Watermark',
                    'video'
                  )
                "
              >
                Download
              </div>
            </div>

            <div class="item flex_between">
              <div class="downLeft">
                <div class="text1">Download MP3</div>
              </div>
              <div
                class="downBtn flex_ccenter shou"
                @click="
                  handleDownload(
                    downData.mp3_url,
                    'SavingTik-Download MP3',
                    'mp3'
                  )
                "
              >
                Download
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="loading" v-if="isHttpLoading">
        <div class="loading-dots flex_center">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="tips flex_center">
          <div class="tip">
            <img src="/static/tip.png" class="img" alt="prompt" />
          </div>
          <div>Daten werden abgerufen, bitte warten Sie einige Sekunden!</div>
        </div>
      </div>
      <div class="error flex_ccenter" v-if="httpError">
        <div class="hono flex_">
          <img src="/static/tishi.png" class="img" alt="prompt" />
          <div>oh nein~</div>
        </div>
        <div class="errMsg">
          Der aktuelle Link ist falsch; bitte kopieren Sie den richtigen Link.
        </div>
      </div>
      <div class="declare">
        <div class="tit flex_center">
          <div class="timg">
            <img src="/static/blue.webp" class="img" alt="blue square" />
          </div>
          <h3 class="h3" style="flex: 1">
            Laden Sie TikTok-Videos (Musically) ohne Wasserzeichen KOSTENLOS
            herunter
          </h3>
        </div>
        <div class="text_content">
          SavingTik.com ist einer der besten Online-TikTok-Downloader, um
          Tiktok-Videos ohne Wasserzeichen herunterzuladen. Sie müssen keine
          Software auf Ihrem Computer oder Mobiltelefon installieren; alles, was
          Sie brauchen, ist ein TikTok-Video-Link, und die gesamte Verarbeitung
          erfolgt auf unserer Seite, so dass Sie nur einen Klick vom
          Herunterladen von Videos auf Ihre Geräte entfernt sind.
        </div>
        <div class="app-link flex_center">
          <a
            href="https://play.google.com/store/apps/details?id=tiktok.tiktokdownload.nowatermark.video.downloader"
            target="_blank"
          >
            <img src="/static/google-play.webp" alt="Google Play" />
          </a>
          <a href="https://apps.apple.com/app/id6466972899" target="_blank">
            <img src="/static/IOS.webp" alt="APP Store" />
          </a>
        </div>
      </div>
      <div class="declare" style="margin-top: 10px">
        <div class="tit flex_center">
          <div class="timg">
            <img src="/static/blue.webp" class="img" alt="blue square" />
          </div>
          <h3 class="h3" style="flex: 1">
            Es gibt kein Wasserzeichen für eine bessere Qualität, was die meisten anderen Tools nicht können.
          </h3>
        </div>
        <div class="text_content">
          <div>
            Herunterladen mit Ihren Browsern: Ich möchte die Dinge einfach für Sie halten. Es gibt keine Notwendigkeit, Software herunterzuladen oder zu installieren. Ich habe auch eine Anwendung für diesen Zweck gemacht, aber Sie können sie installieren, wann immer Sie möchten.
          </div>
          <div>
            Es ist immer kostenlos. Ich platziere nur einige Anzeigen, die die Aufrechterhaltung unserer Dienste und die weitere Entwicklung unterstützen.
          </div>
          <div>
            SavingTik ermöglicht es Benutzern, jedes Bild in einer Diashow auf ihren Computer herunterzuladen und Bilder in Batches herunterzuladen.
          </div>
        </div>
      </div>
      <div class="next_content">
         
        <div class="introduction">
          <div class="introducItem flex_between">
            <div class="itemLeft">
              <h2 class="row_1">TikTok-Video herunterladen</h2>
              <h2 class="row_2">auf Android</h2>
              <div class="row_3 flex_">
                <div class="timg">
                  <img src="/static/blue.webp" class="img" alt="blue square" />
                </div>
                <h3 class="h3" style="flex: 1">
                  So laden Sie TikTok-Videos auf Ihr Android-Gerät herunter:
                </h3>
              </div>
              <div class="row_4">
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Öffnen Sie die TikTok-App, um die URL zu erhalten, tippen Sie auf das "Teilen"-Symbol und wählen Sie "Link kopieren".
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Gehen Sie mit einer beliebigen Browser-App auf Ihrem Android-Gerät zu SavingTik.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Klicken Sie nach dem Einfügen der URL in das Feld auf "Herunterladen".
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Wählen Sie die gewünschte Download-Option und klicken Sie auf "Herunterladen".
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Suchen Sie im Download-Ordner nach der oder den heruntergeladenen Dateien.
                  </div>
                </div>
              </div>
            </div>
            <div class="itemRight1">
              <img
                src="/static/android.webp"
                class="img"
                alt="download TikTok video on Android"
              />
            </div>
          </div>
          <div
            class="introducItem flex_between"
            style="align-items: flex-start"
          >
            <div class="itemRight2">
              <img
                src="/static/iphone.webp"
                class="img"
                alt="Download TikTok video on iPhone and iPad"
              />
            </div>
            <div class="itemLeft">
              <h2 class="row_12">TikTok-Video herunterladen</h2>
              <h2 class="row_22 tright">
                ohne Wasserzeichen auf iPhone und iPad
              </h2>
              <div class="row_33 flex_">
                <div class="timg">
                  <img src="/static/red.webp" class="img" alt="red square" />
                </div>
                <h3 class="h3" style="flex: 1">
                  Es wird Ihnen nicht möglich sein, mit einem Browser herunterzuladen aufgrund der Sicherheitsrichtlinie von Apple. Machen Sie sich jedoch keine Sorgen; wir haben eine leicht verständliche Anleitung erstellt, die Ihnen zeigt, wie Sie SavingTik verwenden können, um TikTok-Videos von Ihrem iPhone oder iPad (iOS) herunterzuladen.
                </h3>
              </div>
              <div class="row_4">
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Öffnen Sie den App Store und installieren Sie die App "Document by Readdle".
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Starten Sie die TikTok-App, wählen Sie "Link kopieren" aus dem Menü und tippen Sie auf die Schaltfläche "Teilen", um die Video-URL zu erhalten.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Tippen Sie auf das Browser-Symbol in der rechten Ecke, um das von Readdle erstellte Dokument zu öffnen.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Starten Sie den Browser und gehen Sie zu SavingTik.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Klicken Sie nach dem Einfügen der URL in das Feld auf "Herunterladen".
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Nach Auswahl einer Option klicken Sie auf "Herunterladen".
                  </div>
                </div>
                <!-- <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">Your file will be saved to your device</div>
                </div> -->
              </div>
            </div>
          </div>
          <div
            class="introducItem flex_between"
            style="align-items: flex-start"
          >
            <div class="itemLeft">
              <h2 class="row_1">Laden Sie das TikTok-Video herunter</h2>
              <h2 class="row_2">ohne Wasserzeichen auf dem PC</h2>
              <div class="row_3 flex_">
                <div class="timg">
                  <img src="/static/blue.webp" class="img" alt="blue square" />
                </div>
                <h3 class="h3" style="flex: 1">
                  Mit den folgenden Anweisungen können Sie hochwertige TikTok-Videos von Ihrem PC herunterladen.
                </h3>
              </div>
              <div class="row_4">
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Um den Link zu erhalten, wählen Sie „Link kopieren“ in der Tiktok-App oder auf tiktok.com aus, indem Sie auf die Schaltfläche „Teilen“ klicken.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Besuchen Sie SavingTik mit dem Browser Ihrer Wahl.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Kopieren Sie die URL und klicken Sie dann im Formular auf „Herunterladen“.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Wählen Sie eine Download-Option und klicken Sie auf die Download-Schaltfläche.
                  </div>
                </div>
                <div class="col1 flex_">
                  <div class="dian"></div>
                  <div class="text">
                    Suchen Sie im Download-Ordner die heruntergeladene(n) Datei(en).
                  </div>
                </div>
              </div>
            </div>
            <div class="itemRight3">
              <img
                src="/static/pc.webp"
                class="img"
                alt="Download TikTok video on PC"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_content_app" v-if="showSwiper">
      <div class="page_content">
        <div class="next_content">
          <div class="introduction_app">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item>
                <div class="introducItem flex_ccenter">
                  <div class="item_img1">
                    <img
                      src="/static/android.webp"
                      class="img"
                      alt="download TikTok video on Android"
                    />
                  </div>
                  <div class="item_img2 flex_ccenter">
                    <h2 class="swipert1">TikTok-Video herunterladen</h2>
                    <h2 class="swipert2">auf Android</h2>
                  </div>
                  <div class="item_3">
                    <h3 class="text_title">
                      So laden Sie TikTok-Videos auf Ihr Android-Gerät herunter:
                    </h3>
                    <div class="row_4 flex_column">
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Öffnen Sie die TikTok-App, um die URL zu erhalten, tippen Sie auf das "Teilen"-Symbol und wählen Sie "Link kopieren".
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Gehen Sie mit einer beliebigen Browser-App auf Ihrem Android-Gerät zu SavingTik.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Klicken Sie nach dem Einfügen der URL in das Feld auf "Herunterladen".
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Wählen Sie die gewünschte Download-Option und klicken Sie auf "Herunterladen".
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Suchen Sie im Download-Ordner nach der oder den heruntergeladenen Dateien.
                        </div>
                      </div>
                    </div>
                  </div>
                </div></van-swipe-item
              >
              <van-swipe-item>
                <div class="introducItem flex_ccenter">
                  <div class="item_img1">
                    <img
                      src="/static/app-iphone.webp"
                      class="img"
                      alt="Download TikTok video on iPhone and iPad"
                    />
                  </div>
                  <div class="item_img2" style="width: 290px">
                    <h2 class="swipert1">TikTok-Video herunterladen</h2>
                    <h2 class="swipert2">
                      ohne Wasserzeichen auf iPhone und iPad
                    </h2>
                  </div>
                  <div class="item_3">
                    <h3 class="text_title">
                      Es wird Ihnen nicht möglich sein, mit einem Browser herunterzuladen aufgrund der Sicherheitsrichtlinie von Apple. Machen Sie sich jedoch keine Sorgen; wir haben eine leicht verständliche Anleitung erstellt, die Ihnen zeigt, wie Sie SavingTik verwenden können, um TikTok-Videos von Ihrem iPhone oder iPad (iOS) herunterzuladen.
                    </h3>
                    <div class="row_4 flex_column">
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Öffnen Sie den App Store und installieren Sie die App "Document by Readdle".
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Starten Sie die TikTok-App, wählen Sie "Link kopieren" aus dem Menü und tippen Sie auf die Schaltfläche "Teilen", um die Video-URL zu erhalten.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Tippen Sie auf das Browser-Symbol in der rechten Ecke, um das von Readdle erstellte Dokument zu öffnen.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Starten Sie den Browser und gehen Sie zu SavingTik.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Klicken Sie nach dem Einfügen der URL in das Feld auf "Herunterladen".
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Nach Auswahl einer Option klicken Sie auf "Herunterladen".
                        </div>
                      </div>
                    </div>
                  </div>
                </div></van-swipe-item
              >
              <van-swipe-item>
                <div class="introducItem flex_ccenter">
                  <div class="item_img1">
                    <img
                      src="/static/pc.webp"
                      class="img"
                      alt="Download TikTok video on PC"
                    />
                  </div>
                  <div class="item_img2">
                    <h2 class="swipert1">Laden Sie das TikTok-Video herunter</h2>
                    <h2 class="swipert2">ohne Wasserzeichen auf dem PC</h2>
                  </div>
                  <div class="item_3">
                    <h3 class="text_title">
                      Mit den folgenden Anweisungen können Sie hochwertige TikTok-Videos von Ihrem PC herunterladen.
                    </h3>
                    <div class="row_4 flex_column">
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Um den Link zu erhalten, wählen Sie „Link kopieren“ in der Tiktok-App oder auf tiktok.com aus, indem Sie auf die Schaltfläche „Teilen“ klicken.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Besuchen Sie SavingTik mit dem Browser Ihrer Wahl.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Kopieren Sie die URL und klicken Sie dann im Formular auf „Herunterladen“.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Wählen Sie eine Download-Option und klicken Sie auf die Download-Schaltfläche.
                        </div>
                      </div>
                      <div class="col1 flex_">
                        <div class="dian"></div>
                        <div class="text">
                          Suchen Sie im Download-Ordner die heruntergeladene(n) Datei(en).
                        </div>
                      </div>
                    </div>
                  </div>
                </div></van-swipe-item
              >
            </van-swipe>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper_view flex_center">
      <img src="/static/swiper.png" class="img" alt="swiper" />
      <div>Swipe left or right to view</div>
    </div>
    <div class="app_footer">
      <div class="page_content container-tt">
        <div class="faqs">
          <div class="flex_center">
            <h3 class="faq_title">- SavingTik FAQ und Tipps -</h3>
          </div>
          <div class="faq_content">
            <div id="faq" itemscope="" itemtype="https://schema.org/FAQPage">
              <div
                itemprop="mainEntity"
                itemscope=""
                itemtype="https://schema.org/Question"
                class="faq_item shou"
                @click="changeFaqItemOpen(item, k)"
                :key="k"
                v-for="(item, k) in list"
              >
                <button style="width: 100%">
                  <div class="itemTitle flex_between">
                    <h5 itemprop="name" class="tit">{{ item.title }}</h5>
                    <div class="imgs">
                      <div v-if="!item.isOpen" class="opentriangle"></div>
                      <div v-else class="closetriangle"></div>
                    </div>
                  </div>
                </button>
                <div
                  itemprop="acceptedAnswer"
                  itemscope=""
                  itemtype="https://schema.org/Answer"
                >
                  <div
                    itemprop="text"
                    class="faq_text"
                    :class="item.isOpen ? '' : 'isBlock'"
                  >
                    <template v-if="item.textContent">
                      {{ item.textContent }}
                    </template>
                    <ul v-else>
                      <li :key="i" v-for="(item1, i) in item.text">
                        {{ item1 }}
                      </li>
                    </ul>
                    <div v-if="item.b">
                      <b>{{ item.b.btit }}</b>
                      <div style="word-wrap: break-word">
                        {{ item.b.burl }}
                      </div>
                      <div>{{ item.b.btext }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <pc-footer></pc-footer>
        </div>
      </div>
    </div>

    <div class="page_bottom flex_center">
      ©SavingTik.Com 2023 All Rights Reserved.
    </div>
    <article-content></article-content>
    <div class="app_page_bottom">
      <app-footer></app-footer>
    </div>

    <video src="" id="video" autoplay muted v-show="false"></video>
    <div class="dloading" v-if="dloading">
      <div class="loader"></div>
    </div>
    <van-popupapp ref="popupAppRef"></van-popupapp>

    <iframe ref="hiddenIFrame" style="display: none"></iframe>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import dataList from "@/static/faqs.js";
import { handleClick } from "@/plugins/Firebase.js";
import CryptoJS from "crypto-js";
import { ImagePreview } from "vant";
import language from "@/components/language.vue";
import VanPopupapp from "@/components/vanPopupapp.vue";
import PcFooter from "@/components/pcFooter.vue";
import AppFooter from "@/components/appFooter.vue";
import ArticleContent from '~/components/articleContent.vue';
export default {
  components: { language, VanPopupapp, PcFooter, AppFooter, ArticleContent },
  head: {
    htmlAttrs: {
      lang: "de",
    },
    bodyAttrs: {
      "data-lang": "de",
    },
    title:
      "Tiktok Downloader - Laden Sie Tiktok-Videos ohne Wasserzeichen online herunter - SavingTik",
    meta: [
      { charset: "utf-8" },
      { property: "og:locale", content: "de" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
      },
      { name: "format-detection", content: "telephone=no" },
      { "http-equiv": "X-UA-Compatible", content: "IE=edge" },
      // Search Engines
      { name: "robots", content: "index, follow" },
      { name: "googlebot", content: "index, follow" },
      { name: "google-site-verification", content: "" },
      { name: "y_key", content: "" },
      { name: "msvalidate.01", content: "" },
      { name: "revisit-after", content: "1 days" },
      //Page Information
      {
        name: "description",
        content:
          "SavingTik: Ihre schnelle TikTok Video Download-Plattform - Laden Sie Ihre bevorzugten TikTok-Videos von jedem Gerät, das Sie haben, mit oder ohne Wasserzeichen, einfach herunter.",
      },
      { name: "copyright", content: "SavingTik" },
      { name: "author", content: "SavingTik" },
      //Schema.org Microdata
      {
        itemprop: "name",
        content:
          "Tiktok Downloader - Laden Sie Tiktok-Videos ohne Wasserzeichen herunter - SavingTik",
      },
      { itemprop: "image", content: "/static/logo/savingtik-thumb.webp" },
      // Facebook / OpenGraph
      {
        property: "og:title",
        content:
          "Tiktok Downloader - Laden Sie Tiktok-Videos ohne Wasserzeichen herunter - SavingTik",
      },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "https://savingtik.com/" },
      { property: "og:image", content: "/static/logo/savingtik-thumb.webp" },
      {
        property: "og:description",
        content:
          "SavingTik.com: Ihre schnelle TikTok Video Download-Plattform - Laden Sie Ihre bevorzugten TikTok-Videos von jedem Gerät, das Sie haben, mit oder ohne Wasserzeichen, einfach herunter.",
      },
      //Twitter
      { name: "twitter:card", content: "summary" },
      { name: "twitter:url", content: "https://savingtik.com/" },
      {
        name: "twitter:title",
        content:
          "Tiktok Downloader - Laden Sie Tiktok-Videos ohne Wasserzeichen herunter - SavingTik",
      },
      {
        name: "twitter:description",
        content:
          "SavingTik.com: Ihre schnelle TikTok Video Download-Plattform - Laden Sie Ihre bevorzugten TikTok-Videos von jedem Gerät, das Sie haben, mit oder ohne Wasserzeichen, einfach herunter.",
      },
      { name: "twitter:image", content: "/static/logo/savingtik-thumb.webp" },
      //Metro Tiles

      //multilingual
      {
        name: "google",
        content: "notranslate",
      },
    ],
    link: [
      // Favicons
      {
        rel: "shortcut icon",
        href: "/static/logo/favicon.png",
        sizes: "512x512",
      },
      {
        rel: "apple-touch-icon",
        href: "/static/logo/favicon.png",
        sizes: "192x192",
      },
      //Apple Touch Icons

      //multilingual
      {
        rel: "alternate",
        hreflang: "x-default",
        href: "https://savingtik.com/de",
      },
      {
        rel: "alternate",
        hreflang: "en",
        href: "https://savingtik.com/",
      },
      {
        rel: "alternate",
        hreflang: "en-in",
        href: "https://savingtik.com/in",
      },
      {
        rel: "alternate",
        hreflang: "vi",
        href: "https://savingtik.com/vn",
      },
      {
        rel: "alternate",
        hreflang: "tr",
        href: "https://savingtik.com/tr",
      },
      {
        rel: "alternate",
        hreflang: "id",
        href: "https://savingtik.com/id",
      },
      {
        rel: "alternate",
        hreflang: "fr",
        href: "https://savingtik.com/fr",
      },
      {
        rel: "alternate",
        hreflang: "pt",
        href: "https://savingtik.com/pt",
      },
      {
        rel: "alternate",
        hreflang: "ru",
        href: "https://savingtik.com/ru",
      },
      {
        rel: "alternate",
        hreflang: "es",
        href: "https://savingtik.com/es",
      },
      {
        rel: "alternate",
        hreflang: "ms",
        href: "https://savingtik.com/ms",
      },
      {
        rel: "alternate",
        hreflang: "ko",
        href: "https://savingtik.com/ko",
      },
      {
        rel: "alternate",
        hreflang: "ja",
        href: "https://savingtik.com/ja",
      },
      {
        rel: "alternate",
        hreflang: "jv",
        href: "https://savingtik.com/jv",
      },
      {
        rel: "alternate",
        hreflang: "cs",
        href: "https://savingtik.com/cs",
      },
      {
        rel: "alternate",
        hreflang: "de",
        href: "https://savingtik.com/de",
      },
      {
        rel: "alternate",
        hreflang: "it",
        href: "https://savingtik.com/it",
      },
      {
        rel: "alternate",
        hreflang: "pl",
        href: "https://savingtik.com/pl",
      },
      {
        rel: "alternate",
        hreflang: "hu",
        href: "https://savingtik.com/hu",
      },
      {
        rel: "alternate",
        hreflang: "nl",
        href: "https://savingtik.com/nl",
      },
      {
        rel: "alternate",
        hreflang: "ro",
        href: "https://savingtik.com/ro",
      },
      {
        rel: "alternate",
        hreflang: "el",
        href: "https://savingtik.com/el",
      },
      {
        rel: "canonical",
        href: "https://savingtik.com/de",
      },
    ],
    script: [
      {
        json: {
          "@context": "https://schema.org",
          "@type": "WebSite",
          name: "Tiktok Downloader - Download Video Tiktok Without Watermark online - SavingTik",
          url: "https://savingtik.com",
          description:
            "SavingTik: Your Fast TikTok Video Download Platform - Easily acquire your preferred TikTok videos  from any device you have, with or without watermarks.",
          publisher: {
            "@type": "Organization",
            name: "SavingTik",
            logo: {
              "@type": "ImageObject",
              url: "https://savingtik.com/static/logo.svg",
            },
          },
        },
        type: "application/ld+json",
      },
      {
        json: {
          "@context": "http://schema.org",
          "@type": "Organization",
          name: "SavingTik",
          url: "https://savingtik.com",
          logo: "https://savingtik.com/static/logo.svg",
          image: "https://savingtik.com/images/icons/savingtik-thumb.webp",
          description:
            "SavingTik: Your Fast TikTok Video Download Platform - Easily acquire your preferred TikTok videos from any device you have, with or without watermarks",
          email: "happyfish2024@gmail.com",
        },
        type: "application/ld+json",
      },
    ],
  },
  name: "IndexPage",
  data() {
    return {
      showSwiper: false,
      showBigImage: false,
      showAppRight: false,
      list: dataList.listDe,
      input: "",
      dloading: false,

      showLanguage: false,
      Language: "en_GB",
      isHttpLoading: false,
      downSuccess: false,
      downStorySuccess: false,
      httpError: false,
      downData: {},
      WithoutVideoSize: "",
      duration: "",
      VideoSize: "",
    };
  },
  computed: {
    ...mapGetters(["language"]),
  },
  mounted() {
    // if (this.language != "en") {
    //   this.$router.push(this.language);
    // } else {
    //   this.$router.push("/");
    // }
    //到达首页
    handleClick("guide_homepage");
    this.debouncedDownInput = this.debounce(this.downInput, 1000);
    window.addEventListener("resize", () => {
      if (window.innerWidth < 1200) {
        this.showSwiper = true;
      }
    });
    let width = window.innerWidth;
    this.$nextTick(() => {
      if (width < 1200) {
        this.showSwiper = true;
      }
    });
  },
  methods: {
    showAppRightHandel() {
      this.$refs.popupAppRef.open();
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    goToTop(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    goToTools(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "tools",
      });
    },
    debounce(fn, delay) {
      let timer;
      return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(context, args);
        }, delay);
      };
    },
    downInput(e) {
      // 粘贴链接到输入框 action_tt_paste
      handleClick("action_tt_paste", {
        islink: e.target.value,
        from: "video",
      });
    },
    handleInput(e) {
      this.debouncedDownInput(e);
    },
    encrypt(message, key, iv) {
      const cipherText = CryptoJS.DES.encrypt(
        message,
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
        }
      ).toString();
      return cipherText;
    },
    sendDownload(event) {
      if (event.keyCode === 13 && !this.isHttpLoading) {
        this.Download();
        event.preventDefault();
        return false;
      }
    },
    async allIn() {
      //点击开始下载按钮 action_tt_download_start
      handleClick("action_tt_download_start", {
        site: "all",
        from: "video",
      });
      // 设定 URL 数组

      // 通过 map 返回一个 Promise 数组
      let promises = this.downData.images.map((url) =>
        this.handleDownloadImages(url)
      );

      // 等待所有 Promise 完成
      await Promise.all(promises);
      this.dloading = false;
    },
    async handleDownloadImages(src) {
      try {
        this.dloading = true;
        const response = await fetch(src);
        if (!response.ok) throw new Error("网络响应不好");
        const data = await response.blob();
        let url = window.URL.createObjectURL(data);
        let link = document.createElement("a");
        link.href = url;
        link.download = "SavingTik" + new Date().getTime();
        document.body.appendChild(link);
        link.click();
        link.remove();
        // //开始下载 tt_download_start
        handleClick("tt_download_start", {
          site: "all",
          from: "video",
        });
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    async handleDownload(src, fileName, type) {
      if (type == "image") {
        //点击开始下载 action_tt_download_start
        handleClick("action_tt_download_start", {
          site: "story",
          from: "video",
        });
      } else if (type == "video") {
        //点击开始下载 tt_download_start
        handleClick("action_tt_download_start", {
          site: "video",
          from: "video",
        });
      } else {
        //点击开始下载 tt_download_start
        handleClick("action_tt_download_start", {
          site: "mp3",
          from: "video",
        });
      }
      try {
        this.dloading = true;
        const response = await fetch(src);
        if (!response.ok) throw new Error("网络响应不好");
        const data = await response.blob();
        let url = window.URL.createObjectURL(data);
        let link = document.createElement("a");
        link.href = url;
        link.download = "SavingTik-" + new Date().getTime();
        document.body.appendChild(link);
        link.click();
        link.remove();
        this.dloading = false;
        if (type == "image") {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "story",
            from: "video",
          });
        } else if (type == "video") {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "video",
            from: "video",
          });
        } else {
          //开始下载 tt_download_start
          handleClick("tt_download_start", {
            site: "mp3",
            from: "video",
          });
        }
      } catch (error) {
        this.dloading = false;
        console.error("捕获到错误: " + error);
      }
    },
    encryptUrl(url, key, iv) {
      // DES 加密
      let encrypted = CryptoJS.DES.encrypt(
        `m=url&url=${encodeURIComponent(url)}`,
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );
      // 转 Base64
      let base64String = encrypted.toString();
      // URL 编码
      let result = encodeURIComponent(base64String);
      // 最终结果
      return `https://savingtik.com/tt.php?v=${result}`;
    },
    decryptUrl(encryptedUrl, key, iv) {
      // URL 解码
      const decodedUrl = decodeURIComponent(encryptedUrl);

      // Base64 解码
      const parsedWordArray = CryptoJS.enc.Base64.parse(decodedUrl);

      // DES解密
      const decrypted = CryptoJS.DES.decrypt(
        {
          ciphertext: parsedWordArray,
        },
        CryptoJS.enc.Utf8.parse(key),
        {
          iv: CryptoJS.enc.Utf8.parse(iv),
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        }
      );
      return decrypted.toString(CryptoJS.enc.Utf8);
    },
    async Download() {
      // 早些返回以避免嵌套
      if (this.isHttpLoading || this.input === "") return;
      this.downData = {};
      this.httpError = false;
      this.downStorySuccess = false;
      this.downSuccess = false;
      const tiktokUrlPattern = new RegExp("^http(s|)://.*tiktok.com.*/.*$");
      if (!tiktokUrlPattern.test(this.input)) {
        //点击解析下载按钮 action_tt_detect_bottom
        handleClick("action_tt_detect_bottom", {
          site: "other",
          noislink: this.input,
          from: "video",
        });
        this.httpError = true;
        this.isHttpLoading = false;
        return;
      }
      //点击解析下载按钮 action_tt_detect_bottom
      handleClick("action_tt_detect_bottom", {
        site: "tt",
        from: "video",
      });
      //开始解析  tt_start_resolve
      handleClick("tt_start_resolve", {
        islink: this.input,
        from: "video",
      });
      this.isHttpLoading = true;

      try {
        let result = this.encryptUrl(this.input, process.env.DES_KEY, process.env.DES_IV);
        const response = await fetch(result, {
          method: "GET",
          headers: { "Content-Type": "application/json" },
        });
        let encryptedResponse = await response.text();
        let decryptedResponse = this.decryptUrl(
          encryptedResponse,
          process.env.DES_KEY,
          process.env.DES_IV
        ); // 使用你的解密函数
        let data = JSON.parse(decryptedResponse).data;
        // 检查数据是否存在
        if (!data) {
          this.httpError = true;
          this.isHttpLoading = false;
          return;
        }

        if (!data.images) {
          await this.fetchVideoAttributes(data);
          //解析成功  tt_resolve_success
          handleClick("tt_resolve_success", {
            site: "video",
            from: "video",
          });
        } else {
          this.downData = data;
          this.downStorySuccess = true;
          this.isHttpLoading = false;
          //解析成功  tt_resolve_success
          handleClick("tt_resolve_success", {
            site: "story",
            from: "video",
          });
        }
      } catch (error) {
        //解析失败  tt_resolve_fail
        handleClick("tt_resolve_fail", {
          reason: "Failed to fetch",
          islink: this.input,
          from: "video",
        });
        console.error(error);
        this.httpError = true;
        this.isHttpLoading = false;
      }
    },
    previewImage(item, k) {
      ImagePreview({
        images: this.downData.images,
        startPosition: k,
      });
    },
    dianji() {
      if (this.$i18n.locale == "en") {
        this.$i18n.setLocale("zh");
      } else {
        this.$i18n.setLocale("en");
      }
    },
    async fetchVideoAttributes(data) {
      try {
        const videoBlob = await fetch(data.video_url).then((res) => res.blob());
        this.WithoutVideoSize = `${(videoBlob.size / (1024 * 1024)).toFixed(
          2
        )} MB`;
        // const videoBlob1 = await fetch(this.input).then((res) => res.blob());
        // this.VideoSize  = `${(videoBlob1.size / (1024 * 1024)).toFixed(
        //   2
        // )} MB`;
        const video = document.getElementById("video");
        video.setAttribute("src", data.video_url);
        video.crossOrigin = "anonymous";
        video.innerHTML = `<source src=${data.video_url} type="audio/mp4" >`;

        await new Promise((resolve) =>
          video.addEventListener("canplaythrough", () => {
            this.duration = this.formatSeconds(video.duration);
            resolve();
          })
        );

        await new Promise((resolve) => {
          const image = new Image();
          image.onload = resolve;
          image.src = data.cover;
        });

        this.downData = data;
        this.isHttpLoading = false;
        this.downSuccess = true;
      } catch (error) {
        console.error(error);

        this.httpError = true;
        this.isHttpLoading = false;
      }
    },

    formatSeconds(seconds) {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds - hours * 3600) / 60);
      const secs = Math.floor(seconds % 60);

      // 使用模板字符串清理时间格式化
      const time = [
        hours ? (hours > 9 ? hours : `0${hours}`) : undefined,
        minutes > 9 ? minutes : `0${minutes}`,
        secs > 9 ? secs : `0${secs}`,
      ]
        .filter(Boolean)
        .join(":");

      return time;
    },
    changeFaqItemOpen(item, k) {
      item.isOpen = !item.isOpen;
    },
  },
};
</script>
<style lang="scss" scoped>
 @import '@/static/style/index.css';
 .dloading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;

  .loader {
    width: 88px;
    height: 88px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .loader:before {
    content: "";
    width: 148px;
    height: 10px;
    background: #202a68;
    position: absolute;
    top: 116px;
    left: -27px;
    border-radius: 50%;
    animation: shadow324 0.5s linear infinite;
  }

  .loader:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #202a68;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    animation: jump7456 0.5s linear infinite;
  }

  @keyframes jump7456 {
    15% {
      border-bottom-right-radius: 3px;
    }

    25% {
      transform: translateY(9px) rotate(22.5deg);
    }

    50% {
      transform: translateY(18px) scale(1, 0.9) rotate(45deg);
      border-bottom-right-radius: 40px;
    }

    75% {
      transform: translateY(9px) rotate(67.5deg);
    }

    100% {
      transform: translateY(0) rotate(90deg);
    }
  }

  @keyframes shadow324 {
    0%,
    100% {
      transform: scale(1, 1);
    }

    50% {
      transform: scale(1.2, 1);
    }
  }
}
 .loading-dots {
  position: relative;
  z-index: 999;
  margin-top: 70px;
}

.dot {
  background-color: #83818c;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 10px;
  animation: loading-animation 1.5s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.5s;
}

.dot:nth-child(3) {
  animation-delay: 1s;
}

@keyframes loading-animation {
  0%,
  80%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5);
  }
}
</style>